<template>
  <div
      style="height: 100vh; display: flex; align-items: center; justify-content: center; background-color: white; margin-top: -60px;">
    <div style="display: flex; background-color: white; width: 50%; border-radius: 5px; overflow: hidden;">
      <div style="flex: 1; display: flex; align-items: center; justify-content: center;">
        <el-form :model="user" style="width: 40%;" :rules="rules" ref="resetForm">
          <el-form-item prop="account">
            <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入账号"
                      v-model="user.account"></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input prefix-icon="el-icon-mobile" size="medium" placeholder="请输入验证码"
                      v-model="user.code"></el-input>
            <el-button @click="sendResetCode" size="medium" :disabled="disableSendCode">获取验证码</el-button>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请输入新密码"
                      v-model="user.password"></el-input>
          </el-form-item>
          <el-form-item prop="confirmPass">
            <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请确认密码"
                      v-model="user.confirmPass"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="resetPassword">修改密码</el-button>
          </el-form-item>
          <div style="display: flex">
            <div style="flex: 1">
              返回<span style="color: #0f9876; cursor: pointer;" @click="$router.push('/UserloginView')">登录</span>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      user: {
        account: '965414324@qq.com',
        code: '',
        password: '',
        confirmPass: ''
      },
      rules: {
        account: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {type: 'email', message: '请输入有效的邮箱', trigger: ['blur', 'change']} // 邮箱格式验证
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
          {validator: this.validatePassword, trigger: 'blur'} // 密码至少六位验证规则
        ],
        confirmPass: [
          {required: true, message: '请确认密码', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (value !== this.user.password) {
                callback(new Error('两次输入的密码不一致'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ]
      },
      disableSendCode: false
    };
  },
  methods: {
    async sendResetCode() {
      const response = await axios.get("/api/user/login/resetCode", {params: {account: this.user.account}});
      if (response.data.code === 200) {
        this.$message.success('验证码已发送到您的邮箱，请注意查收');
        this.disableSendCode = true; // 禁用发送验证码按钮
      } else {
        this.$message.error('发送验证码失败');
      }
    },
    async resetPassword() {
      try {
        await this.$refs.resetForm.validate();
        const response = await axios.post("/api/user/login/resetPwd", this.user);
        if (response.data.code === 200) {
          this.$message.success('密码修改成功');
          await this.$router.push('/UserloginView');
        } else {
          this.$message.error('验证码错误，密码修改失败');
        }
      } catch (error) {
        this.$message.error('密码修改失败，请稍后重试');
      }
    },
    validatePassword(rule, value, callback) {
      if (value.length < 6) {
        callback(new Error('密码长度需要在6和20位数之间'));
      } else {
        callback();
      }
    }
  }
};
</script>


